<template>
  <div class="container">
    <!-- 知识点：组件标签里面的标签体内容都是解析之后，才传递到组件里面的 -->
    <!-- 如果该组件写了样式，就就将样式解析之后在传递到组件里面 -->
    <!-- 如果该组件没有写样式（解析的时候就没有样式），那么就是直接使用传递到的这个组件里面的样式也可以进行解析 -->

    <!-- 引入分类组件，可以在组件标签里面写标签体内容（其实就是可以写html片段） -->
    <!-- 其中title、:listData就是组件标签的属性 -->
    <Category title="美食" :listData="foods">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="美食标签体内容">
    </Category>

    <Category title="游戏">
      <ul>
        <li v-for="(item, index) in games" :key="index">{{item}}</li>
      </ul>
    </Category>

    <Category title="电影" :listData="films">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue';

  export default {
    name: 'App',
    components: {
      Category: Category
    },
    data() {
      return {
        foods: ['火锅', '烧烤', '小龙虾', '牛排'],
        games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
        films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》']
      }
    },

  }
</script>

<style scoped>
  .container {
    /* 弹性盒模型 */
    display: flex;
    /* 主轴的对齐方式 */
    justify-content: space-around;
  }
</style>